<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { onMounted } from 'vue'
import { CollegeType } from '../../util/type'
import { LabType,CollegesColorType,LabTypeColor } from '../../util/type'
import LabMap from '../../components/LabMap.vue'
onMounted(() => {
  getList()
})

const tableData = ref([])

const getList = async () => {

    const res = await axios.get('/adminapi/labs')
    tableData.value = res.data
    // ElMessage.success('获取成功')
}



const college_method=(value)=>{
  const obj= CollegeType.find(item=>item.value===value)
  // console.log(obj)
  return obj.label
}

const lab_type_method=(value)=>{
  const obj= LabType.find(item=>item.value===value)
  // console.log(obj)
  return obj.label
}

// 预览
const currentItem = ref({})
const dialogVisible = ref(false)
const handleLocation=(item)=>{
  dialogVisible.value=true
  currentItem.value=item
  // console.log(currentItem.value)
}

// 更新
const currentItemId=ref({})
const showLabDialogList = ref(false)
const updataLabDialogList = ref({
  title: '',
  college_type: '',
  lab_type: '',
  capacity: '',
})
const handleUpdate=(item)=>{
  currentItemId.value=item
  updataLabDialogList.value.title=item.title
  updataLabDialogList.value.college_type=item.college_type
  updataLabDialogList.value.lab_type=item.lab_type
  updataLabDialogList.value.capacity=item.capacity

  // console.log(updataLabDialogList.value)
  showLabDialogList.value=true
}
// 规则
const rules = {
  title: [
    { required: true, message: '请输入实验室名称', trigger: 'blur' },
  ],
  college_type: [
    { required: true, message: '请选择学院', trigger: 'change' },
  ],
  lab_type: [
    { required: true, message: '请选择实验室类型', trigger: 'change' },
  ],
  capacity: [
    { required: true, message: '请输入容纳人数', trigger: 'blur' },
  ],
}
// 取消
const handleUpCancel=()=>{
  showLabDialogList.value=false
}

const updataLabDialogListRef=ref()
// 确定
const handleConfirm=()=>{
  updataLabDialogListRef.value.validate(async (valid) => {
    if (valid) {
      // console.log('ok')
      // console.log(updataLabDialogList.value)
      await axios.post(`/adminapi/labs/${currentItemId.value.id}`,updataLabDialogList.value)
      ElMessage.success('更新成功')
      showLabDialogList.value=false
      getList()
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

// 删除
const handleRemove=async (item)=>{
  await axios.delete(`/adminapi/labs/${item.id}`)
  // 提示消息删除成功
  // console.log(res)
  ElMessage.success('删除成功')
  // 重新渲染
  getList()
}
</script>

<template>
  <div>
    <el-table  stripe :data="tableData" style="width: 100%">

    <el-table-column label="名称">
      <template #default="scope">
        <el-link type="primary" @click="handleLocation(scope.row)">{{ scope.row.title }}</el-link>
      </template>
    </el-table-column>

    <el-table-column label="所属学院">
      <template #default="scope">
        <el-tag     
        :color="CollegesColorType[scope.row.college_type]"
       
        round>{{ college_method(scope.row.college_type) }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="实验室类型">
      <template #default="scope">
        <el-tag 
        :color="LabTypeColor[scope.row.lab_type]"
        round

        >{{ lab_type_method(scope.row.lab_type) }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column prop="capacity" label="容纳人数"></el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button style="margin-right: 5px;" size="large" 
        round 
        type="primary" color="#626aef"
         @click="handleUpdate(scope.row)"
  
         >
          更新
        </el-button>
        <el-popconfirm title="你确定要删除吗?"
         @confirm="handleRemove(scope.row)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button  size="large"  round type="danger"  >删除</el-button>
    </template>
  </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-dialog
  v-if="dialogVisible"
  :fullscreen="true"
    v-model="dialogVisible"
    title="实验室位置"
    align-center
  >
<div><LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap></div>
   
  </el-dialog>


  <!-- 更新按钮 -->
  <el-dialog
  @close="handleUpCancel"
    v-model="showLabDialogList"
    title="更新实验室信息"
    width="500"
    align-center
  >
  <el-form
    ref="updataLabDialogListRef"
    style="max-width: 1800px;"
    :model="updataLabDialogList"
    status-icon
    :rules="rules"
    label-width="100"
    class="demo-ruleForm"
  >
  <el-form-item label="实验室名称" prop="title">
      <el-input 
      v-model="updataLabDialogList.title"
       type="text" 
        />
    </el-form-item>
    <el-form-item label="所属学院" prop="college_type">
      <el-select v-model="updataLabDialogList.college_type" placeholder="请选择学院">
        <el-option
        v-for="item in CollegeType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        ></el-option>
        </el-select>
    </el-form-item>

    <el-form-item label="实验室类型" prop="lab_type">
      <el-select v-model="updataLabDialogList.lab_type" placeholder="请选择实验室类型">
      <el-option
        v-for="item in LabType"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    </el-form-item>

    <el-form-item label="容纳人数" prop="capacity">
      <el-input 
      v-model="updataLabDialogList.capacity"
      placeholder="请输入容纳人数"
       type="number" 
        />
    </el-form-item>
  </el-form>



    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handleConfirm()">
          确定
        </el-button>
        <el-button @click="handleUpCancel()">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.el-tag
{
  --el-tag-text-color:white;
}
</style>
